<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="icon" href="img/tltle.ico" type="image/x-icon">
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/tltle.ico" type="image/x-icon">
    <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style-1.css">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        @keyframes da {
            0%{
                background-color: rgba(0,0,0,0);
            }
            100%{
                background-color: rgba(0,0,0,0.5);
            }
        }
        .boxa{
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            width: 100%;
            height: 100%;
            z-index: 4;
            display: none;
            animation-name: da;
            animation-duration: 0.5s;
        }
    </style>
</head>
<body>
<div id="app">
<div class="warper">
    <div class="header-inner clearfix">
        <div class="header clearfix">
            <div class="header-a">
                <a href=""><img src="img/logo.png" alt=""></a>
            </div>
            <div class="sf clearfix">
                <div class="search clearfix">
                    <div class="in"></div>
                    <a href="">English</a>
                </div>
                <div class="search-1">
                    <a href="#" class="q1 tit active">品牌活动</a>
                    <a href="#" class="q2 tit">新品推荐</a>
                    <a href="index-2.html" class="q3 tit">WEDDING</a>
                    <a href="#" class="q4 tit">高级珠宝</a>
                    <a href="#" class="q5 tit">钻石类品</a>
                    <a href="#" class="q6 tit">品牌介绍</a>
                    <a href="#" class="q7 tit">时尚资讯</a>
                    <a href="#" class="q8 tit">品牌服务</a>
                </div>
            </div>
        </div>
        <div class="header-bei clearfix">
            <div class="header-a">
                <a href=""><img src="img/logo-1.png" alt=""></a>
            </div>
            <div class="sf">
                <div class="search clearfix">
                    <div class="in"></div>
                    <a href="">English</a>
                </div>
                <div class="search-1">
                    <a href="#" class="q1">品牌活动</a>
                    <a href="#" class="q2">新品推荐</a>
                    <a href="index-2.html" class="q3">WEDDING</a>
                    <a href="#" class="q4">高级珠宝</a>
                    <a href="#" class="q5">钻石类品</a>
                    <a href="#" class="q6">品牌介绍</a>
                    <a href="#" class="q7">时尚资讯</a>
                    <a href="index-3.html" class="q8">品牌服务</a>
                </div>
            </div>
        </div>
        <div id="box" class="boxa">
            <div class="sw-1  clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>品牌活动</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">50克拉全球设计甄选</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">金伯利之星</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">2018KDC国际设计大赛</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">巴塞尔展</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-2.jpg" alt="">
                </div>
            </div>

            <div class="sw-2 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>新品推荐</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">臻我之歌</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">爱·主题之永恒去</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">结系列-纪念日</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">爱的旅程</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">结系列—玩趣</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">INFINITY STORY</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">INFINITY U</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">爱的印记</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">幸福时刻</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">爱·唯一</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">皇室花园</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">女神之光</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-4.png" alt="">
                </div>
            </div>

            <div class="sw-3 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>WEDDINC</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">情侣对戒</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">克拉钻</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-5.jpg" alt="">
                </div>
            </div>

            <div class="sw-4 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>高级珠宝</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">曲藏臻宝</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">OUR STORY</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">获奖作品</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">中国·韵</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">"和"系列</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">华·宋</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">时节之美</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-6.jpg" alt="">
                </div>
            </div>

            <div class="sw-5 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>钻石品类</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">钻戒</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">项链</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">手镯</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">耳饰</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">男士钻饰</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">钻石套系</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-7.jpg" alt="">
                </div>
            </div>

            <div class="sw-6 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>品怕介绍</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">品牌历史</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">品牌文化</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">故事片</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-8.jpg" alt="">
                </div>
            </div>

            <div class="sw-7 clearfix">
                <div class="sw-left">
                    <div class="q-1-3">
                        <span>时尚资讯</span>
                    </div>
                    <div class="q-1">
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">设计师</a>
                            <img src="img/bg-3.png" alt="">
                            <a href="">最新资讯</a>
                        </div>
                        <div class="q-1-1">
                            <img src="img/bg-3.png" alt="">
                            <a href="">KD时尚</a>
                        </div>
                    </div>
                </div>
                <div class="sw-right">
                    <img src="img/bg-9.jpg" alt="">
                </div>
            </div>

            <div class="sw-8 clearfix">
            <div class="sw-left">
                <div class="q-1-3">
                    <span>品牌服务</span>
                </div>
                <div class="q-1">
                    <div class="q-1-1">
                        <img src="img/bg-3.png" alt="">
                        <a href="">售后服务</a>
                        <img src="img/bg-3.png" alt="">
                        <a href="">联系我们</a>
                    </div>
                    <div class="q-1-1">
                        <img src="img/bg-3.png" alt="">
                        <a href="">门店查询</a>
                        <img src="img/bg-3.png" alt="">
                        <a href="">加盟审批</a>
                    </div>
                </div>
            </div>
            <div class="sw-right">
                <img src="img/bg-10.jpg" alt="">
            </div>
        </div>
        </div>
        <div class="dh">
            <div class="header-name1">
                PRODUCT
            </div>
            <div class="header-name2">
                search for
            </div>
            <div class="header-input">
                <input type="text" class="head-search-box" placeholder="请输入您要搜索产品的关键字">
                <div class="head-search-btn">
                    搜索
                </div>
            </div>
            <div class="head-search-close"></div>
        </div>
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">
                <img src="img/logo-1.png" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!--<div class="mr-auto"></div>-->
                <form class="form-inline top">
                    <ul>
                        <li>
                            <a href="#">品牌活动</a>
                        </li>
                        <li>
                            <a href="#">新品推荐</a>
                        </li>
                        <li>
                            <a href="#">WEDDTNG</a>
                        </li>
                        <li>
                            <a href="#">高级珠宝</a>
                        </li>
                        <li>
                            <a href="#">钻石类品</a>
                        </li>
                        <li>
                            <a href="#">品牌介绍</a>
                        </li>
                        <li>
                            <a href="#">时尚资讯</a>
                        </li>
                        <li>
                            <a href="#">品牌服务</a>
                        </li>


                    </ul>
                </form>
            </div>
        </nav>
    </div>


    <div class="nav-inner">
        <div class="nav">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="img/lunbo-1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/lunbo-2.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/lunbo-3.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/lunbo-4.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/lunbo-5.jpg" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination">

                </div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>
            <div class="arrow"></div>
        </div>
    </div>

    <!--<div class="nav-inner clearfix">
        <div class="nav clearfix">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="img/lunbo-1.jpg" class="d-block w-100" alt="">
                    </div>
                    <div class="carousel-item">
                        <img src="img/lunbo-2.jpg" class="d-block w-100" alt="">
                    </div>
                    <div class="carousel-item">
                        <img src="img/lunbo-3.jpg" class="d-block w-100" alt="">
                    </div>
                    <div class="carousel-item">
                        <img src="img/lunbo-4.jpg" class="d-block w-100" alt="">
                    </div>
                    <div class="carousel-item">
                        <img src="img/lunbo-5.jpg" class="d-block w-100" alt="">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span>
                        <img src="img/bg-9.png" alt="">
                    </span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span>
                        <img src="img/bg-10.png" alt="">
                    </span>
                </a>
            </div>
        </div>
    </div>-->

    <div class="navbar-inner">
        <div class="i-newpd">
            <div class="box-1">
                <div class="div-ca">
                    <a href="" class="a-1">
                        <img src="img/bg-11.png" alt="">
                    </a>
                    <h2>
                        爱•乐主题之永恒曲
                    </h2>
                    <img src="img/bg-15.png" alt="">
                    <div class="sign">
                        <img src="img/bg-12.png" alt="">
                    </div>
                    <p>音乐之声徜徉于漫漫时光， 历久弥新，似爱永恒。</p>
                    <a href="" class="more">
                        <span>DISCOVER</span>
                    </a>
                </div>
            </div>
            <div class="box-1 p-1">
                <img src="img/bg-13.png" alt="">
            </div>
            <div class="box-1">
                <div class="div-ca">
                    <a href="" class="a-1">
                        <img src="img/bg-17.png" alt="">
                    </a>
                    <h2>
                        结系列 - 纪念日
                    </h2>
                    <img src="img/bg-15.png" alt="">
                    <div class="sign">
                        <img src="img/bg-12.png" alt="">
                    </div>
                    <p>线与线的交缠，钻石与光芒的配合，最终都渐渐圆满</p>
                    <a href="" class="more">
                        <span>DISCOVER</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="main-inner">
        <div class="main">
            <div class="tips">
                <div class="je-name">高级珠宝</div>
                <div class="je-en-name">hign jewelry</div>
                <a href="">
                    DISCOVER
                </a>
            </div>
        </div>
    </div>

    <div class="zspl-inner">
        <div class="zspl">
            <h1>
                <span>钻石品类</span>
            </h1>
            <div class="tab clearfix">
                <ul id="tab">
                    <li class="kan-1 active" onclick="arr1()">
                        钻戒
                        <span></span>
                    </li>
                    <li class="kan-2">
                        项链
                        <span></span>
                    </li>
                    <li class="kan-3">
                        手镯
                        <span></span>
                    </li>
                    <li class="kan-4">
                        耳饰
                        <span></span>
                    </li>
                    <li class="kan-5">
                        男士钻戒
                        <span></span>
                    </li>
                    <li class="kan-6">
                        钻石套系
                        <span></span>
                    </li>
                </ul>
                <div class="sop">
                    <div class="list clearfix">
                        <ul>
                            <li v-for = "on in sceatr">
                                <a href=""><img :src="on.img_1" alt=""></a>
                                <h2>{{ on.p_1 }}</h2>
                                <p>{{ on.p1 }}</p>
                                <a href="" class="more">{{ on.a_1 }}</a>
                            </li>
                            <!--<li>
                                <a href=""><img src="img/bg-20.png" alt=""></a>
                                <h2>思慕</h2>
                                <p>夜幕时分，我将思慕的网，撒向你海洋般的眼睛，以期捕一颗真心。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-21.png" alt=""></a>
                                <h2>誓约</h2>
                                <p>伫立于黄昏的天幕下，许下坚定的誓言，惟愿余生都是你。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-20.png" alt=""></a>
                                <h2>浓情</h2>
                                <p>爱情，温暖热烈过正午的阳光，我无法，只能选择沉溺，迷醉。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>-->
                        </ul>
                    </div>
                    <div class=" clearfix">
                        <ul>
                            <li v-for = "on in sceatr">
                                <a href=""><img :src="on.img_2" alt=""></a>
                                <h2>{{ on.p_2 }}</h2>
                                <p>{{ on.p2 }}</p>
                                <a href="" class="more">{{ on.a_2 }}</a>
                            </li>
                            <!--<li>
                                <a href=""><img src="img/bg-25.png" alt=""></a>
                                <h2>自·雅趣</h2>
                                <p>从容恬淡，格调雅致，历经时光淬炼，自成一番风情。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-26.png" alt=""></a>
                                <h2>自·独舞</h2>
                                <p>​ 不依附，不随波，不逐流，独立的个体舞动非凡的美。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-27.png" alt=""></a>
                                <h2>自·绽放</h2>
                                <p>自由生长，灵逸飘动，纷繁的世界中绽放玲珑的心。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-28.png" alt=""></a>
                                <h2>自·纯真</h2>
                                <p>洒脱鲜活，天真无邪，愿你不忘初心，烂漫依旧。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>-->
                        </ul>
                    </div>
                    <div class=" clearfix">
                        <ul>
                            <li v-for = "on in sceatr">
                                <a href=""><img :src="on.img_3" alt=""></a>
                                <h2>{{ on.p_3 }}</h2>
                                <p>{{ on.p3 }}</p>
                                <a href="" class="more">{{ on.a_3 }}</a>
                            </li>
                            <!--<li>
                                <a href=""><img src="img/bg-29.png" alt=""></a>
                                <h2>花之舞</h2>
                                <p>沉淀着中国古老医学智慧的灵芝,在珠宝的领域得以延伸。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-30.png" alt=""></a>
                                <h2>左右</h2>
                                <p>​ 金伯利钻石“our story”主题系列珠宝，秉承东方文化的传承与创新，...</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-31.png" alt=""></a>
                                <h2>神州墨韵</h2>
                                <p>金伯利钻石“our story”主题系列珠宝，秉承东方文化的传承与创新。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-32.png" alt=""></a>
                                <h2>水之舞</h2>
                                <p>闪亮的钻石似那溅起的水花，跳跃着一曲大自然美妙的水之舞。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>-->
                        </ul>
                    </div>
                    <div class=" clearfix">
                        <ul>
                            <li v-for = "on in sceatr">
                                <a href=""><img :src="on.img_4" alt=""></a>
                                <h2>{{ on.p_4 }}</h2>
                                <p>{{ on.p4 }}</p>
                                <a href="" class="more">{{ on.a_4 }}</a>
                            </li>
                           <!-- <li>
                                <a href=""><img src="img/bg-33.png" alt=""></a>
                                <h2>“Miss You”系列耳饰</h2>
                                <p>七夕时分，爱侣相伴的甜蜜气氛让人倍感浪漫。2017七夕，金伯利钻石“Mi...</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-34.png" alt=""></a>
                                <h2>瓦当</h2>
                                <p>​ 金伯利钻石“our story”主题系列珠宝，秉承东方文化的传承与创新，...</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-35.png" alt=""></a>
                                <h2>雁塔题名</h2>
                                <p>金伯利钻石“our story”主题系列珠宝，秉承东方文化的传承与创新，...</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-36.png" alt=""></a>
                                <h2>水之舞</h2>
                                <p>闪亮的钻石似那溅起的水花，跳跃着一曲大自然美妙的水之舞。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>-->
                        </ul>
                    </div>
                    <div class=" clearfix">
                        <ul>
                            <li v-for = "on in sceatr">
                                <a href=""><img :src="on.img_5" alt=""></a>
                                <h2>{{ on.p_5 }}</h2>
                                <p>{{ on.p5 }}</p>
                                <a href="" class="more">{{ on.a_5 }}</a>
                            </li>
                            <!--<li>
                                <a href=""><img src="img/bg-37.png" alt=""></a>
                                <h2>格调手链</h2>
                                <p>不用张扬 不喜跋扈 光芒不掩，魅力自现 只需本色彰显 便是男人格调</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-38.png" alt=""></a>
                                <h2>格调戒指</h2>
                                <p>​ 不用张扬 不喜跋扈 光芒不掩，魅力自现 只需本色彰显 便是男人格调</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-39.png" alt=""></a>
                                <h2>马到功成</h2>
                                <p>戎马丹心，是男人永久的情怀。马的元素，是艺术不老的话题，是设计师们不争的...</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-40.png" alt=""></a>
                                <h2>马到功成</h2>
                                <p>戎马丹心，是男人永久的情怀。马的元素，是艺术不老的话题，是设计师们不争的...</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>-->
                        </ul>
                    </div>
                    <div class=" clearfix">
                        <ul>
                            <li v-for = "on in sceatr">
                                <a href=""><img :src="on.img_6" alt=""></a>
                                <h2>{{ on.p_6 }}</h2>
                                <p>{{ on.p6 }}</p>
                                <a href="" class="more">{{ on.a_6 }}</a>
                            </li>
                            <!--<li>
                                <a href=""><img src="img/bg-41.png" alt=""></a>
                                <h2>摩天轮 Ferris Wheel</h2>
                                <p>登上乐园的王座，那座梦中的摩天轮； 闭上眼，牵紧手，仿佛吻到星空。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-42.png" alt=""></a>
                                <h2>Perfection - 项链</h2>
                                <p>​遇见你，云温柔，风温柔，阳光也温柔，一切都变完美。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-43.png" alt=""></a>
                                <h2>Perfection - 耳饰</h2>
                                <p>遇见你，云温柔，风温柔，阳光也温柔，一切都变完美。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>
                            <li>
                                <a href=""><img src="img/bg-44.png" alt=""></a>
                                <h2>Harmony - 项链</h2>
                                <p>琴瑟和鸣，余音绕梁，你与我，和谐共处，相伴一生。</p>
                                <a href="" class="more">DISCOVER</a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </div>
        <!--<div class="div">
            <div class="list list-7">
                <ul class="liss">
                    <li>
                        <a href=""><img src="img/bg-19.png" alt=""></a>
                        <h2>心·语</h2>
                        <p>我真诚地、温柔地爱着你， 用心呢喃亲密的絮语； 我的灵魂伴侣， 侧耳倾听...</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-20.png" alt=""></a>
                        <h2>思慕</h2>
                        <p>夜幕时分，我将思慕的网，撒向你海洋般的眼睛，以期捕一颗真心。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-21.png" alt=""></a>
                        <h2>誓约</h2>
                        <p>伫立于黄昏的天幕下，许下坚定的誓言，惟愿余生都是你。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-22.png" alt=""></a>
                        <h2>浓情</h2>
                        <p>爱情，温暖热烈过正午的阳光，我无法，只能选择沉溺，迷醉。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                </ul>
            </div>


            <div class="list ">
                <ul class="liss ">
                    <li>
                        <a href=""><img src="img/bg-25.png" alt=""></a>
                        <h2>自·雅趣</h2>
                        <p>从容恬淡，格调雅致，历经时光淬炼，自成一番风情。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-26.png" alt=""></a>
                        <h2>自·独舞</h2>
                        <p>​ 不依附，不随波，不逐流，独立的个体舞动非凡的美。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-27.png" alt=""></a>
                        <h2>自·绽放</h2>
                        <p>自由生长，灵逸飘动，纷繁的世界中绽放玲珑的心。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-28.png" alt=""></a>
                        <h2>自·纯真</h2>
                        <p>洒脱鲜活，天真无邪，愿你不忘初心，烂漫依旧。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                </ul>
            </div>

            <div class="list">
                <ul class="liss">
                    <li>
                        <a href=""><img src="img/bg-29.png" alt=""></a>
                        <h2>花之舞</h2>
                        <p>沉淀着中国古老医学智慧的灵芝,在珠宝的领域得以延伸。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-30.png" alt=""></a>
                        <h2>左右</h2>
                        <p>​ 金伯利钻石“our story”主题系列珠宝，秉承东方文化的传承与创新，...</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-31.png" alt=""></a>
                        <h2>神州墨韵</h2>
                        <p>金伯利钻石“our story”主题系列珠宝，秉承东方文化的传承与创新。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-32.png" alt=""></a>
                        <h2>水之舞</h2>
                        <p>闪亮的钻石似那溅起的水花，跳跃着一曲大自然美妙的水之舞。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                </ul>
            </div>

            <div class="list">
                <ul class="liss">
                    <li>
                        <a href=""><img src="img/bg-33.png" alt=""></a>
                        <h2>“Miss You”系列耳饰</h2>
                        <p>七夕时分，爱侣相伴的甜蜜气氛让人倍感浪漫。2017七夕，金伯利钻石“Mi...</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-34.png" alt=""></a>
                        <h2>瓦当</h2>
                        <p>​ 金伯利钻石“our story”主题系列珠宝，秉承东方文化的传承与创新，...</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-35.png" alt=""></a>
                        <h2>雁塔题名</h2>
                        <p>金伯利钻石“our story”主题系列珠宝，秉承东方文化的传承与创新，...</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-36.png" alt=""></a>
                        <h2>水之舞</h2>
                        <p>闪亮的钻石似那溅起的水花，跳跃着一曲大自然美妙的水之舞。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                </ul>
            </div>

            <div class="list">
                <ul class="liss">
                    <li>
                        <a href=""><img src="img/bg-37.png" alt=""></a>
                        <h2>格调手链</h2>
                        <p>不用张扬 不喜跋扈 光芒不掩，魅力自现 只需本色彰显 便是男人格调</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-38.png" alt=""></a>
                        <h2>格调戒指</h2>
                        <p>​ 不用张扬 不喜跋扈 光芒不掩，魅力自现 只需本色彰显 便是男人格调</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-39.png" alt=""></a>
                        <h2>马到功成</h2>
                        <p>戎马丹心，是男人永久的情怀。马的元素，是艺术不老的话题，是设计师们不争的...</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-40.png" alt=""></a>
                        <h2>马到功成</h2>
                        <p>戎马丹心，是男人永久的情怀。马的元素，是艺术不老的话题，是设计师们不争的...</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                </ul>
            </div>

            <div class="list">
                <ul class="liss">
                    <li>
                        <a href=""><img src="img/bg-41.png" alt=""></a>
                        <h2>摩天轮 Ferris Wheel</h2>
                        <p>登上乐园的王座，那座梦中的摩天轮； 闭上眼，牵紧手，仿佛吻到星空。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-42.png" alt=""></a>
                        <h2>Perfection - 项链</h2>
                        <p>​遇见你，云温柔，风温柔，阳光也温柔，一切都变完美。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-43.png" alt=""></a>
                        <h2>Perfection - 耳饰</h2>
                        <p>遇见你，云温柔，风温柔，阳光也温柔，一切都变完美。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li>
                        <a href=""><img src="img/bg-44.png" alt=""></a>
                        <h2>Harmony - 项链</h2>
                        <p>琴瑟和鸣，余音绕梁，你与我，和谐共处，相伴一生。</p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                </ul>
            </div>
        </div>-->
            <div class="btn">
                <a href="" class="more">
                    <span>DISCOVER</span>
                </a>
            </div>

        </div>
    </div>

    <div class="i-ad-inner">
        <div class="i-ad">
            <div class="wedding-tips tips">
                <div class="je-name">婚礼系列</div>
                <div class="je-en-name">WEDDING</div>
                <a href="">
                    DISCOVER
                </a>
            </div>
        </div>
    </div>

    <div class="i-new-inner">
        <div class="i-news end">
            <h2>
                <span>最新资讯</span>
            </h2>
            <div class="zop clearfix">
                <ul>
                    <li class="img-1">
                        <a href="" class="f-img">
                            <img src="img/bg-45.jpg" alt="">
                            <div class="time">
                                <p class="fz20">Jun</p>
                                <p>11</p>
                            </div>
                        </a>
                        <a href="" class="tit">
                            金伯利钻石“幻镜森林”千枚克拉钻闪耀郑州
                        </a>
                        <p>
                            6月7日-13日，金伯利钻石“幻镜森林”千枚克拉钻巡展在郑州丹尼斯大卫城一楼中庭闪耀拉开帷幕。郑州，金伯利....
                        </p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li class="img-1">
                        <a href="">
                            <img src="img/bg-47.jpg" alt="">
                            <div class="time">
                                <p class="fz20">Jun</p>
                                <p>11</p>
                            </div>
                        </a>
                        <a href="" class="tit">
                            KDC2018国际钻石首饰设计大赛网络人气奖作品公布
                        </a>
                        <p>
                            ▲  点击此公告图片可查看作品详情.
                        </p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                    <li class="img-1">
                        <a href="">
                            <img src="img/bg-48.png" alt="">
                            <div class="time">
                                <p class="fz20">Jun</p>
                                <p>11</p>
                            </div>
                        </a>
                        <a href="" class="tit">
                            金伯利钻石璀璨2019巴塞尔展
                        </a>
                        <p>
                            一场关于珠宝的奇妙梦幻之旅       3月21日至3月26日，具有钟表珠宝界“奥斯卡”美称的&#45;&#45;巴塞尔世界钟表....
                        </p>
                        <a href="" class="more">DISCOVER</a>
                    </li>
                </ul>
            </div>
            <div class="btn">
                <a href="" class="more">
                    <span>查看更多资讯</span>
                </a>
            </div>
        </div>
    </div>

    <div class="footer-inner">
        <div class="footer">
            <div class="w88">
                <div class="ft-tp">
                    <img src="img/jiantou.png" alt="">
                </div>
                <div class="ft-nav f-cb">
                    <div class="nav-li">
                        <div class="li-a">
                            <a href="" class="a-ul">品牌介绍</a>
                            <a href="" class="nav-btn">品牌历史</a>
                            <a href="" class="nav-btn">品牌文化</a>
                            <a href="" class="nav-btn">故事片</a>
                        </div>
                        <div class="li-a">
                            <a href="" class="nav-other mt90">品牌介绍</a>
                            <a href="" class="nav-btn">售后服务</a>
                            <a href="" class="nav-btn">联系我们</a>
                            <a href="" class="nav-btn">门店查询</a>
                            <a href="" class="nav-btn">加盟审批</a>
                        </div>
                    </div>
                    <div class="nav-li">
                        <div class="li-a">
                            <a href="" class="a-ul">新品推荐</a>
                            <a href="" class="nav-btn">臻我之歌</a>
                            <a href="" class="nav-btn">爱•乐主题之永恒曲</a>
                            <a href="" class="nav-btn">结系列 - 纪念日</a>
                            <a href="" class="nav-btn">爱的旅程</a>
                            <a href="" class="nav-btn">结系列 - 玩趣</a>
                            <a href="" class="nav-btn">Infinity Story</a>
                            <a href="" class="nav-btn">Infinity U</a>
                            <a href="" class="nav-btn">爱的印记</a>
                            <a href="" class="nav-btn">幸福时刻</a>
                            <a href="" class="nav-btn">爱·唯一</a>
                            <a href="" class="nav-btn">皇室花园</a>
                            <a href="" class="nav-btn">女神之光</a>
                        </div>
                        <div class="li-a">
                            <a href="" class="nav-other mt90">时尚资讯</a>
                            <a href="" class="nav-btn">最新资讯</a>
                            <a href="" class="nav-btn">KD时尚</a>
                            <a href="" class="nav-btn">设计师</a>
                        </div>
                    </div>
                    <div class="nav-li">
                        <div class="li-a">
                            <a href="" class="a-ul">高级珠宝</a>
                            <a href="" class="nav-btn">典藏臻品</a>
                            <a href="" class="nav-btn">Our story</a>
                            <a href="" class="nav-btn">获奖作品</a>
                            <a href="" class="nav-btn">中国·韵</a>
                            <a href="" class="nav-btn">“和”系列</a>
                            <a href="" class="nav-btn">华 • 宋</a>
                            <a href="" class="nav-btn">时节之美</a>
                        </div>
                        <div class="li-a">
                            <a href="" class="nav-other mt90">品牌活动</a>
                            <a href="" class="nav-btn">50克拉全球设计甄选</a>
                            <a href="" class="nav-btn">金伯利之星</a>
                            <a href="" class="nav-btn">2018KDC国际设计大赛</a>
                            <a href="" class="nav-btn">巴塞尔展</a>
                        </div>
                    </div>
                    <div class="nav-li">
                        <div class="li-a">
                            <a href="" class="a-ul"> WEDDING</a>
                            <a href="" class="nav-btn">情侣对戒</a>
                            <a href="" class="nav-btn">克拉钻</a>
                        </div>
                        <div class="li-a">
                            <a href="" class="nav-other mt90">联系我们</a>
                            <a href="" class="nav-btn">TEL:400-889-8858</a>
                            <p>
                                <a href="" class="a-3">
                                    <img src="img/bg-49.png" alt="">
                                </a>
                                <span>: 上海市浦东新区川展路558号</span>
                            </p>
                        </div>
                    </div>
                    <div class="nav-li">
                        <div class="li-a">
                            <a href="" class="a-ul">钻石品类</a>
                            <a href="" class="nav-btn">钻戒</a>
                            <a href="" class="nav-btn">项链</a>
                            <a href="" class="nav-btn">手镯</a>
                            <a href="" class="nav-btn">耳饰</a>
                            <a href="" class="nav-btn">男士钻戒</a>
                            <a href="" class="nav-btn">钻石套系</a>
                        </div>
                        <div class="li-a">
                            <p class="nav-other mt90">关注我们</p>
                            <div class="share">
                                <a href="" class="a-1"></a>
                                <a href="" class="a-2">
                                    <img src="img/bg-54.jpg" alt="" class="ipc">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ft-bot f-cb clearfix">
                    <div class="f1">
                        <a href="">网站地图</a>
                        <a href="">公司声明</a>
                        <a href="">钻石知识</a>
                        <a href="">公司简介</a>
                        <a href="">加入我们</a>
                        <a href="">企业邮箱</a>
                    </div>
                    <div class="cent-font">
                        <p>
                            Copyright©2019 金伯利钻石 .All right reserved
                            <a href="">沪ICP备11008681号</a>
                            技术支持: <a href="">博采网络</a>
                            <a href="">站长统计</a>
                        </p>
                        <div class="k-1 clearfix">
                            <img src="img/bg-56.png" alt="">
                            <p>
                                沪公网安备 31011502003948号
                            </p>
                        </div>
                    </div>
                    <div class="fr friend-link">
                        <span class="stit">友情链接</span>
                        <div class="sub-box">
                            <p>
                                <a href="">金伯利钻石（加拿大）</a>
                            </p>
                            <p>
                                <a href="">中国珠宝行业网</a>
                            </p>
                            <p>
                                <a href="">上海钻石交易所</a>
                            </p>
                            <p>
                                <a href="">中国珠宝玉石首饰行业协会</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="w-left">
    <ul>
        <li id="ku-1">
            <p>New</p>
            <p class="w-p1">Arrival</p>
        </li>
        <li id="ku-2">
            <p>High</p>
            <p class="w-p1">Jewelry</p>
        </li>
        <li id="ku-3">
            <p>Catego</p>
        </li>
        <li id="ku-4">
            <p>Wedding</p>
        </li>
        <li id="ku-5">
            <p>News</p>
        </li>
        <li>
            <div class="w-left2"></div>
            <a href="index-4.html">门店查询</a>
            <div class="w-right2"></div>
        </li>
        <li>
            <div class="w-left2"></div>
            <a href="">用户反馈</a>
            <div class="w-right2"></div>
        </li>
        <li>
            <div class="w-left2"></div>
            <a href="">产品查询</a>
            <div class="w-right2"></div>
        </li>
        <li id="ku-6">

        </li>
    </ul>
</div>
</div>


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/index.js"></script>

<script>

    /*轮播图*/
    var mySwiper = new Swiper ('.swiper-container', {

        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>
</body>
</html>